﻿@*@Page Language="C#" Inherits="System.Web.Mvc.ViewPage<JQGridMVCExamples.Models.TwoLevelHierarchyJqGridModel>*@
@using Trirand.Web.Mvc
@using GUI.Models
 

<head id="Head1" runat="server">
    <meta charset="utf-8">
    <title>jqGrid for ASP.NET MVC - Hierarchy Two Levels</title>    
    <!-- The jQuery UI theme that will be used by the grid -->
    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/redmond/jquery-ui.css" />
    <!-- The jQuery UI theme extension jqGrid needs -->    
    <link rel="stylesheet" type="text/css" href="http://www.trirand.net/aspnetmvc/Content/themes/ui.jqgrid.css" />
    <!-- jQuery runtime minified -->
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-2.0.3.min.js" type="text/javascript"></script>
    <!-- The localization file we need, English in this case -->
    <script type="text/javascript" src="http://www.trirand.net/aspnetmvc/Scripts/trirand/i18n/grid.locale-en.js"></script>
    <!-- The jqGrid client-side javascript -->
    <script type="text/javascript" src="http://www.trirand.net/aspnetmvc/Scripts/trirand/jquery.jqGrid.min.js"></script>
</head>
<body>    
    <div>                
        <!-- The parent grid - Customers -->   
        @Html.Trirand().JQGrid(Model.CustomersGrid, "CustomersGrid") 
        
        <!-- The child grid - Orders for each parent customers -->
        @Html.Trirand().JQGrid(Model.OrdersGrid, "OrdersGrid")
        
        <script type="text/javascript">
            function showOrdersSubGrid(subgrid_id, row_id) {            
                // the "showSubGrid_OrdersGrid" function is autogenerated and available globally on the page by the second child grid. 
                // Calling it will place the child grid below the parent expanded row and will call the action specified by the DaraUrl property
                // of the child grid, with ID equal to the ID of the parent expanded row                
                showSubGrid_OrdersGrid(subgrid_id, row_id);
            }   
        </script>
        
        <br /><br />
        <span style="font-size: 140%; font-family: Tahoma; font-weight: bold;">Hierarchy Settings:</span>
        <hr />        
        @Html.BeginForm("hierarchytwolevels", "grid")
        {      
        <span style="font-family: Tahoma;">
            <table cellpadding="2" cellspacing="2" border="0">
                <tr>
                    <td>Reload subgrid on expand</td>
                    <td>@Html.CheckBox("reloadOnExpand", (bool)ViewData["reloadOnExpand"], new { onchange = "this.form.submit();" })</td>        
                    <td>Plus icon</td>
                    <td>
                        @Html.DropDownList(
                                "plusIcon", 
                                new SelectList(
                                    new List<SelectListItem>() {
                                    new SelectListItem { Value = "ui-icon-plus" },
                                    new SelectListItem { Value = "ui-icon-plusthick" },
                                    new SelectListItem { Value = "ui-icon-carat-1-e" },
                                    new SelectListItem { Value = "ui-icon-triangle-1-e" }
                                }, "Value", "Value", ViewData["plusIcon"]),
                                new { onchange="this.form.submit();" })               
                    </td>                   
                </tr>
                <tr>
                    <td>Auto expand child rows on load</td>
                    <td>@Html.CheckBox("expandOnLoad", (bool)ViewData["expandOnLoad"], new { onchange = "this.form.submit();" })%></td>        
                    <td>Minus icon</td>
                    <td>
                        @Html.DropDownList(
                                "minusIcon", 
                                new SelectList(
                                    new List<SelectListItem>() {
                                    new SelectListItem { Value = "ui-icon-minus" },
                                    new SelectListItem { Value = "ui-icon-minusthick" },
                                    new SelectListItem { Value = "ui-icon-carat-1-s" },
                                    new SelectListItem { Value = "ui-icon-triangle-1-s" }
                                }, "Value", "Value", ViewData["minusIcon"]),
                                new { onchange="this.form.submit();" })    
                    </td>
                </tr>
                <tr>
                    <td>Select parent row on expand</td>
                    <td>@Html.CheckBox("selectOnExpand", (bool)ViewData["selectOnExpand"], new { onchange = "this.form.submit();" })</td>        
                    <td>Opened child grid icon</td>
                    <td>
                        @Html.DropDownList(
                                "openIcon", 
                                new SelectList(
                                    new List<SelectListItem>() {
                                    new SelectListItem { Text = "ui-icon-carat-1-sw", Value = "ui-icon-carat-1-sw" },
                                    new SelectListItem { Text = "ui-icon-arrow-1-e", Value = "ui-icon-arrow-1-e" }                    
                                }, "Text", "Value", ViewData["openIcon"]),
                                new { onchange="this.form.submit();" })              
                    </td>
                </tr>               
            </table>
        </span>
   }
    
    </div>
    <br /><br />
    
    <div>
     
    </div>
</body>
